<template>
	<view style="background-color: #F5F5F5;height: 100vh;">
		<view class="header" :style="'padding-top: '+bartop+'px; padding-bottom:10rpx'">
			<view class="goodsmsgheader headertop" style="width: 100%;">
			      <navigator open-type="navigateBack" style="padding:10rpx">
			        <image src="https://x.bilinmeiju.com/static/myfangchan/zjt.png" mode="aspectFit"></image>
			      </navigator>
			      <text>我的房产</text>
			      <!-- <image src="/static/goodsmsghei.png" mode="aspectFit" bindtap="showmsg" wx:if="{{cartlen=='00'?false:true}}"><text>{{cartlen}}</text></image> -->
			  </view>
		</view>
		<!-- <view :style="'height:'+topheight+'px;'"></view> -->
		<view class="tishi" style="margin-top: 77px;">
			<image class="tishiimg" src="https://x.bilinmeiju.com/static/myfangchan/tishi.png" mode=""></image>
			<view class="tishitext">
				温馨提示：您在比邻美居智慧社区或您所在的物业中心已经登记了以下信息
			</view>
		</view>
		<view class="" style="height:40rpx ;"></view>
		<view class="box" v-for="(item,index) in list" :key="index">
			<image class="box-img" :src="item.status==1?'https://x.bilinmeiju.com/static/myfangchan/mingpian1.png':'https://x.bilinmeiju.com/static/myfangchan/mingpian2.png'" mode=""></image>

			<view class="box1">
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="box1-1">
						<view class="box1-1-1">
							<view class="box1-1-1text">{{item.shequ}}</view>
							<image @click="erwm(item)" :style="item.shenfen==1?'':'opacity: 0;'" class="box1-1-1img" src="https://x.bilinmeiju.com/static/myfangchan/erwm.png" mode="">
							</image>
						</view>
						<view class="box1-1-2text">
							{{item.roomname}}
						</view>
					</view>
					<view class="box1-2" :style="item.status==0?'color:#333333':''">
						{{item.formatstatus}}
					</view>
				</view>
				<view class="box2">
					<view class="box2-1">
						<image class="box2-1img" :src="item.headimgurl" style="border-radius: 50%;" mode=""></image>
						<view class="box2-1text">
							{{item.name}} | 业主
						</view>
					</view>
					<view class="box2-2" @click="$gopage('/pages/mychengyuan/mychengyuan?roomid='+item.roomId)">
						<view class="box2-2text">
							共{{item.num}}人
						</view>
						<image class="box2-2img" src="https://x.bilinmeiju.com/static/myfangchan/yfh.png" mode=""></image>
					</view>
				</view>

			</view>
		</view>
		<box ref="box"></box>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: 0,
				topheight: 0,
				list:[],
				roomId:'',
				bartop:0
			}
		},
		onLoad(e) {
			this.bartop = this.$bartop
			this.roomId = e.roomId;
			this.getmyroom()
		},
		methods: {
			getmyroom(){
				this.$post('center/getmyroom',{}).then(res=>{
					this.list = res.data.list;
					if(this.list.length==0){
						var box = {
							isshow:true,
							title:'请绑定房产',
							content:'请先进行房产绑定',
							content2:'然后进行数据录入',
							btntitle:'去绑定',
							path:'/pages/fangchanbangding/fangchanbangding',
							type:2
						}
						this.$refs.box.open(box)
					}
				})
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
			erwm(item) {
				if(item.shenfen!=1) return false; 
				uni.navigateTo({
					url: '/pages/myfangchan/zhanshi?roomid='+item.roomId+'&shenfen='+item.shenfen
				})
			}

		}
	}
</script>

<style>
	.beijing {
		width: 100vw;
		height: 174rpx;
		z-index: 1;
		position: absolute;
		top: 0;
	}

	.top {
		z-index: 5;
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.toptext {
		z-index: 5;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
		line-height: 36rpx;
	}

	.top1img {
		z-index: 5;
		width: 20rpx;
		height: 36rpx;
	}

	.tishi {
		display: flex; 
		align-items: center; 
		justify-content: center;
		width: 750rpx;
		height: 70rpx;
		background-color: rgb(255, 214, 178);
	}

	.tishiimg {
		width: 22rpx;
		height: 22rpx;
		margin-top: 24rpx;
	}

	.tishitext {
		margin-left: 10rpx;
		font-size: 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FE7B00;
		padding-top: 24rpx;
		line-height: 70rpx;
	}

	.box {
		width: 690rpx;
		height: 217rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}

	.box-img {
		width: 690rpx;
		height: 217rpx;
		z-index: -1;
	}

	.box1 {
		z-index: 1;
		margin-top: -200rpx;
	}

	.box1-1 {
		margin-left: 30rpx;
	}

	.box1-1-1 {
		display: flex;

	}

	.box1-1-1text {
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 30rpx;
	}

	.box1-1-1img {
		margin-left: 20rpx;
		width: 28rpx;
		height: 27rpx;
	}

	.box1-1-2text {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 28rpx;
	}

	.box1-2 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		line-height: 40rpx;
		text-align: center;
		color: #FF7901;
		background-color: white;
		width: 120rpx;
		height: 40rpx;
		border-bottom-left-radius: 30rpx;
		border-top-left-radius: 30rpx;
	}

	.box2 {
		margin: 0 auto;
		margin-top: 47rpx;
		width: 650rpx;
		display: flex;
		justify-content: space-between;
	}

	.box2-1 {
		display: flex;
		align-items: center;
	}

	.box2-1img {
		width: 52rpx;
		height: 52rpx;
	}

	.box2-1text {
		margin-left: 20rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 28rpx;
	}

	.box2-2 {
		display: flex;
	}

	.box2-2text {
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 28rpx;
	}

	.box2-2img {
		margin-left: 15rpx;
		width: 14rpx;
		height: 22rpx;
	}
</style>
